<!--
 * @Description:
 * @Author: william
 * @Date: 2024-05-06 10:49:50
 * @LastEditors: william
 * @LastEditTime: 2025-02-14 14:03:58
-->
<template>
  <div class="hamburger-container" @click="toggleClick">
    <el-icon size="24px">
      <i-ep-Back v-if="sidebar.opened" />
      <i-ep-Right v-else />
    </el-icon>
    <span class="title">
      <slot />
    </span>
  </div>
</template>

<script setup>
const appStore = useAppStore()
const { sidebar } = storeToRefs(appStore)
const toggleClick = _ => {
  appStore.toggleSideBar()
}
</script>

<style scoped lang="scss">
.hamburger-container {
  cursor: pointer;
  display: flex;
  align-items: center;
  height: var(--fold-unfold-height);
  padding: 0 18px;
  overflow: hidden;
  color: var(--color-333);
  border-top: 1px solid var(--hamburger-border-color);
  .title {
    margin-left: 5px;
    font-size: 16px;
    white-space: nowrap;
  }
}
</style>
